<template>
  <div
    style="margin-top: 30px; margin-bottom: 30px"
    class="table-two-container"
    :style="{ backgroundColor: modelValue?.bgColor }"
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
  >
    <div class="count-down">
      <div class="table-two">
        <div class="table-two__wrapper">
          <table class="tableTwo">
            <thead>
              <tr
                class="tableTwo__th"
                v-if="
                  modelValue && modelValue.headers && modelValue.headers.length
                "
              >
                <th v-for="item in modelValue.headers">
                  <p>{{ item.title }}</p>
                </th>
              </tr>
            </thead>
            <tbody
              v-if="modelValue && modelValue.rows && modelValue.rows.length"
            >
              <tr class="tableTwo__row" v-for="itemRow in modelValue.rows">
                <td>{{ itemRow.title }}</td>
                <td>{{ itemRow.first }}</td>
                <td>{{ itemRow.second }}</td>
                <td>{{ itemRow.third }}</td>
                <td>{{ itemRow.forth }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <Operate
      v-if="!isPreview"
      v-model:show="isHover"
      @handle-edit="showSetting = true"
      @handle-delete="handleDelete"
      @handle-copy="handleCopy"
      @handle-paste="handlePaste"
    ></Operate>
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script lang="ts" setup>
import { computed, nextTick, ref } from "vue";
import { randomString } from "@/utils/common";
import Setting from "./setting.vue";
import Operate from "@/common/Operate/index.vue";

// 定义组件名称
defineOptions({
  name: "TableTwo",
});

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true,
  },
});
console.log("!!!!", props.modelValue);
const emit = defineEmits([
  "update:modelValue",
  "handleDelete",
  "handleCopy",
  "handlePaste",
]);

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

const handleDelete = () => {
  emit("handleDelete", props.modelValue.id);
};

const handleCopy = () => {
  emit("handleCopy", props.modelValue);
};

const handlePaste = (type: string) => {
  emit("handlePaste", type);
};

const handleInit = () => {
  if (props.modelValue && props.modelValue.headers && props.modelValue.headers.length) return; // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: "TableTwo",
    headers: [
      { title: 1 },
      { title: 2 },
      { title: 3 },
      { title: 4 },
      { title: 5 },
    ],

    rows: [
      {
        title: "1",
        first: "1",
        second: "1",
        third: "1",
        forth: "1",
      },
      {
        title: "2",
        first: "2",
        second: "2",
        third: "2",
        forth: "2",
      },
    ],
  };
  emit("update:modelValue", data);
};

handleInit();
</script>

<style lang="scss" scoped>
.table-two-container {
  position: relative;
}
.tableTwo__row td {
  vertical-align: middle;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
}
.tableTwo__row td:first-child {
  background-color: #f2f8ff;
  padding: 10px 16px;
}
.tableTwo {
  width: 100%;
  max-width: 952px;
  margin: 0 auto;
}

.tableTwo__th th p {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.33;
}

@media (max-width: 1023.98px) {
  .tableTwo__th th p {
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 767.98px) {
  .tableTwo__th th p {
    line-height: 1.5;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 767.98px) and (max-width: 1023.98px) {
  .tableTwo__th th p {
    font-size: 14px;
    line-height: 1.285;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 767.98px) {
  .tableTwo__th th:first-child p {
    display: none;
  }
}

.tableTwo th {
  background-color: #0032a0;
  color: #fff;
  padding: 8px 16px;
  vertical-align: middle;
}

@media (max-width: 575.98px) {
  .tableTwo th {
    padding: 8px 10px 8px 12px;
  }
}

.tableTwo tr {
  background-color: #fff;
}

.tableTwo__row td {
  vertical-align: middle;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.01em;
  padding: 10px 16px;
}

@media (max-width: 1023.98px) {
  .tableTwo__row td {
    font-size: 14px;
    line-height: 1.285;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 575.98px) {
  .tableTwo__row td {
    padding: 10px 10px 10px 12px;
  }
}

.tableTwo__row td:first-child {
  background-color: #f2f8ff;
  padding: 10px 16px;
}

@media (max-width: 767.98px) {
  .tableTwo__row td:first-child {
    padding: 10px 6px 10px 8px;
  }
}
</style>
